#favicon-maker-popup {

  .popup-inner {
    width: 600px;
    user-select: none;
  }

  .popup-inner .body {
    display: flex;
    justify-content: space-evenly;
  }

  .popup-inner .actions {
    margin-right: 12px;
    margin-left: 12px;
    padding: 10px 0;

    #imagePreview {
      border: 1px solid black;
    }
  }

  .design-container {
    position: relative;
    flex: 0 0 256px;

    #grid {
      position: absolute;
      width: 256px;
      height: 256px;
      z-index: 100;
      pointer-events: none;
    }
    #favicon-maker {
      position: relative;
      z-index: 99;
      cursor: crosshair;
    }

  }

  .toolbox {
    margin: 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .palette-container {
    align-self: flex-start;
    display: grid;
    grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px;
    grid-gap: 5px;

    .color {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }

  .currentColor {
    background-color: #438cc4;
    border: 2px solid black;
    align-self: center;
    width: 30px;
    height: 30px;
  }

  .tools {
    color: black;
    display: flex;
    justify-content: space-evenly;
    font-size: 14px;

    span, i {
      cursor: pointer;
    }
  }

  .grids {
    display: flex;
    justify-content: space-evenly;
  }
}